"use client";

import "./index.css";
import { Avatar, Card, Col, Row } from "antd";
import React, { useState } from "react";
import { useSelector } from "react-redux";
import { RootState } from "@/stores";
import Meta from "antd/es/card/Meta";
import Title from "antd/es/typography/Title";
import Paragraph from "antd/es/typography/Paragraph";
import CalendarChart from "@/app/user/center/components/CalendarChart";

export default function UserCenter() {
  // 获取登录用户的信息
  const user = useSelector((state: RootState) => state.loginUser);
  const [activeTabKey, setActiveTabKey] = useState<string>("record");

  return (
    <div id={"userCenter"} className={"limit-width"}>
      <Row gutter={[16, 16]}>
        <Col xs={24} md={6}>
          <Card style={{ textAlign: "center" }}>
            <Avatar src={user.userAvatar} size={108} />
            <div style={{ marginBottom: "16" }} />
            <Meta
              title={
                <Title level={4} style={{ marginBottom: 0, marginTop: 12 }}>
                  {user.userName}
                </Title>
              }
              description={
                <Paragraph type={"secondary"}>{user.userProfile}</Paragraph>
              }
            />
          </Card>
        </Col>
        <Col xs={24} md={18}>
          <Card>
            <CalendarChart />
          </Card>
          <Card
            tabList={[
              {
                key: "record",
                label: "刷题记录",
              },
              {
                key: "others",
                label: "其它",
              },
            ]}
            activeTabKey={activeTabKey}
            onTabChange={(key) => {
              setActiveTabKey(key);
            }}
          >
            {activeTabKey === "record" && <div>records</div>}
            {activeTabKey === "others" && <div>others</div>}
          </Card>
        </Col>
      </Row>
    </div>
  );
}
